/******************************************************
 * @package Pav Opencart Theme Framework for Opencart 1.5.x
 * @version 1.1
 * @author http://www.pavothemes.com
 * @copyright	Copyright (C) Augus 2013 PavoThemes.com <@emai:pavothemes@gmail.com>.All rights reserved.
 * @license		GNU General Public License version 2
*******************************************************/
// Center-align a block level element
 

/* box */

.box {
    margin-bottom: @box-module-margin;
    .box-heading {
        background: url('@{image-theme-path}box-heading-bg.png') no-repeat left center;
        border-bottom: 2px solid @box-module-heading-border;
        padding: @box-module-heading-padding - 2 @box-module-heading-padding + 20;
        font-family: @box-module-heading-font;
        font-size: @box-module-heading-fontsize;
        text-transform: uppercase;
        position: relative;
        margin-bottom: @box-module-margin + 3;
        span:before {
            border-bottom: 2px solid @box-module-badge;
            position: absolute;
            bottom: -2px;
            left: 0; 
            content: "";
            width: 20%;
        }
        span{
            color: #3B3B3B; 
            span {
                color: @box-module-text-light;
            }
        }
    }
     .box-content {

     }
}

.sidebar {
    .box {
        .box-heading {
            background:@box-module-heading-bg;
            border:  none;
            margin-bottom:  0;
            span{
                color: @box-module-heading-color;
                &:before {
                    border-right: 24px solid transparent;
                    border-top: 24px solid @box-module-badge;
                    border-bottom: none;
                    position: absolute;
                    top: 0;
                    bottom: inherit;
                    width: 24px;
                }
                span {
                    color: @box-module-heading-color;
                }
            }
        }
        .box-content {
            background: @box-module-content-bg;
            padding: @box-module-content-padding;
        }

    }

}
        /* box styles */
    .box{  
        &.nopadding {
            .box-content{
                padding: 10px 0 0;
            }
            ul li {
                border-bottom: 1px solid #fff;
                padding-right: 20px;
                padding-left: 20px;
                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
    .sidebar .box,
    .box{ 
        &.highlighted {
            .box-heading{
                background-color: @theme-color;
            }
            .box-content{ 
                background-color: #fafafa;
            } 
            li{
                
            }
            a{
                 
            &:hover{
                }
            }
        }
        
        &.dark {
            color: #fff;
            .box-heading{
                background-color: #292929!important;
                border-bottom: 1px solid #3f3f3f!important;
                position:  relative;
                 &:before {
                    content: "";
                    background: url('@{image-theme-path}bg-tite.png') no-repeat ;
                    position: absolute;
                    top:39px;
                    left: 30px;
                    width: 35px;
                    height: 11px;
                 }
            }
            .box-content{ 
                background-color: #2e2e2e!important;
            } 
            ul li{
                border-bottom: 1px solid #343434!important;
                padding-top: 7px;
                padding-bottom: 7px;
                a{
                    color: #fff;
                    background: none;  
                    text-transform: none;
                    padding-left: 0;
                    &:hover{
                        color: @theme-color-hover;
                    }
                }
                
            }
        }
        &.red {
            color: #fff;
            .box-heading{
                background-color: #b72c2c!important;
                border-bottom: 1px solid #c96666!important;
                position:  relative;
            }
            .box-content{ 
                background-color: #C83A3A!important;
            } 
            ul li{
                border-bottom: 1px solid #c96666!important;
                padding-top: 7px;
                padding-bottom: 7px;
                a{
                    color: #fff;
                    background: none;  
                    text-transform: none;
                    padding-left: 0;
                    &:hover{
                        color: #fff;
                    }
                }
                
            }
        }
        &.yellow {
            color: #fff;
            .box-heading{
                background-color: #d8981a!important;!important;
                border-bottom: 1px solid #e8c174!important;
                position:  relative;
            }
            .box-content{ 
                background-color: #EDA81F!important;
            } 
            ul li{
                border-bottom: 1px solid #e8c174!important;
                padding-top: 7px;
                padding-bottom: 7px;
                a{
                    color: #fff;
                    background: none;  
                    text-transform: none;
                    padding-left: 0;
                    &:hover{
                        color: #fff;
                    }
                }
                
            }
        }
        &.blue {
            color: #fff;
            .box-heading{
                background-color: #3483bf!important;
                border-bottom: 1px solid #64a0ce!important;
                position:  relative;
            }
            .box-content{ 
                background-color: #3c92d4!important;
            } 
            ul li{
                border-bottom: 1px solid #64a0ce!important;
                padding-top: 7px;
                padding-bottom: 7px;
                a{
                    color: #fff;
                    background: none;  
                    text-transform: none;
                    padding-left: 0;
                    &:hover{
                        color: #fff;
                    }
                }
                
            }
        }
        &.orange {
            color: #fff;
            .box-heading{
                background-color: #da6e3e!important;
                border-bottom: 1px solid #e69673!important;
                position:  relative;
            }
            .box-content{ 
                background-color: #e97846!important;
            } 
            ul li{
                border-bottom: 1px solid #e69673!important;
                padding-top: 7px;
                padding-bottom: 7px;
                a{
                    color: #fff;
                    background: none;  
                    text-transform: none;
                    padding-left: 0;
                    &:hover{
                        color: #fff;
                    }
                }
                
            }
        }
        &.green {
            color: #fff;
            .box-heading{
                background-color: #669435!important;
                border-bottom: 1px solid #a2cd75!important;
                position:  relative;
            }
            .box-content{ 
                background-color: #7DB641!important;
            } 
            ul li{
                border-bottom: 1px solid #a2cd75!important;
                padding-top: 7px;
                padding-bottom: 7px;
                a{
                    color: #fff;
                    background: none;  
                    text-transform: none;
                    padding-left: 0;
                    &:hover{
                        color: #fff;
                    }
                }
                
            }
        }

        &.purple {
            color: #fff;
            .box-heading{
                background-color: #a130b9!important;
                border-bottom: 1px solid #cb6ddf!important;
                position:  relative;
            }
            .box-content{ 
                background-color: #b436ce!important;
            } 
            ul li{
                border-bottom: 1px solid #cb6ddf!important;
                padding-top: 7px;
                padding-bottom: 7px;
                a{
                    color: #fff;
                    background: none;  
                    text-transform: none;
                    padding-left: 0;
                    &:hover{
                        color: #fff;
                    }
                }
                
            }
        }
    }

